<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="产品ID" prop="productId">
        <el-input v-model="queryParams.productId" placeholder="请输入产品ID" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>

      <el-form-item label="产品名称" prop="productName" class="single-line-label">
        <span class="label-spacing"></span>
        <el-select v-model="queryParams.productName" clearable placeholder="请选择产品名称" filterable>
          <el-option v-for="(item, i) in extData.productNameList || []" :key="i" :label="item.value"
            :value="item.value"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="渠道类型" prop="channelType">
        <el-select v-model="queryParams.channelType" placeholder="请选择渠道类型" clearable>
          <el-option v-for="(item, i) in extData.channelTypeList || []" :key="i" :label="item.key" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="场景IDs" prop="sceneId">
        <el-select v-model="queryParams.sceneIdString" placeholder="请选择场景IDs" clearable>
          <el-option v-for="(item, i) in extData.sceneMapList || []" :key="i" :label="item.key" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="small" @click="handleAdd"
          v-hasPermi="['product:onlieInfo:add']">新增</el-button>
      </el-col>
      <el-switch style="height: 32px;" @change="priceSortSwitchChange" v-model="priceSortSwitch" active-text="启用一键价格排序" inactive-text="正常排序">
      </el-switch>
      <!-- <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon" size="small" @click="getListPirceSort">一键排序</el-button>
      </el-col> -->
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="OnlieInfoList" :row-class-name="rowClassName">

      <el-table-column label="产品名称" align="center" prop="productName">
        <template slot-scope="scope">
          {{ scope.row.productName }} [{{ scope.row.productId }}]
        </template>
      </el-table-column>
      <el-table-column label="logo" align="center" prop="logoUrl">
        <template slot-scope="scope">
          <ImagePreview v-if="!!scope.row.logoUrl" :src="scope.row.logoUrl" :width="70" :height="80" />
        </template>
      </el-table-column>
      <el-table-column label="产品价格" align="center" prop="priceAmount" />
      <el-table-column label="账户余额" align="center" prop="totalAmount" />
      <el-table-column label="排序权重" align="center" prop="sortWeight" />
      <el-table-column label="渠道类型" align="center" prop="channelTypeStr" />
      <el-table-column label="场景IDs" align="center" prop="sceneIdStr" />
      <el-table-column label="上架时间" align="center" prop="starttime" width="200">
        <template slot-scope="scope">
          {{ scope.row.starttime }} ～ {{ scope.row.endtime }}
        </template>
      </el-table-column>
      <el-table-column label="上架日期" align="center" prop="startdate" width="200">
        <template slot-scope="scope">
          {{ scope.row.startdate }} ～ {{ scope.row.enddate }}
        </template>
      </el-table-column>
      <el-table-column label="uv总控量(已产生)" align="center" prop="totalUvNumber">
        <template slot-scope="scope">
          {{ scope.row.uvCount }} <br /><span style="color:red"> ({{ scope.row.hasUvNumber }})</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="status">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0"
            @change="handleStatusChange(scope.row, $event)"></el-switch>
          <span :style="{ color: scope.row.status === 0 ? 'red' : 'green' }">{{ scope.row.status === 0 ? '关' : '开'
          }}</span>
        </template>
      </el-table-column>

      <el-table-column label="跳转状态" align="center" prop="jumpStatus">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.jumpStatus" :active-value="1" :inactive-value="0"
            @change="StatusChange(scope.row, $event)"></el-switch>
          <span :style="{ color: scope.row.jumpStatus === 0 ? 'red' : 'green' }">{{ scope.row.jumpStatus === 0 ? '关' :
            '开'
            }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="small" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
            v-hasPermi="['product:onlieInfo:edit']">修改</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <!-- 修改产品上线信息对话框 -->
    <el-drawer :title="title" :visible.sync="open" size="75%" append-to-body>
      <div class="demo-drawer-form">
        <div class="demo-drawer-form__content">
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form ref="form" :model="form" :rules="rules" label-width="100px">
                <el-form-item v-if="!id" label="产品名称" prop="productName" class="single-line-label">
                  <span class="label-spacing"></span>
                  <el-select v-model="form.productName" clearable placeholder="请选择产品名称" filterable>
                    <el-option v-for="(item, i) in extData.inProductNameList || []" :key="i" :label="item.name"
                      :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="产品单价" prop="priceAmount">
                  <el-input v-model.number="form.priceAmount" placeholder="请输入产品单价" type="number" min="0" />
                </el-form-item>
                <el-form-item label="排序权重" prop="sortWeight">
                  <el-input v-model.number="form.sortWeight" placeholder="请输入排序权重" type="number" min="0" max="9" />
                </el-form-item>
                <el-form-item label="渠道类型" prop="channelType" class="single-line-label">
                  <el-select v-model="form.channelType" clearable placeholder="请选择渠道类型" filterable multiple>
                    <el-option v-for="(item, i) in extData.channelTypeList || []" :key="i" :label="item.key"
                      :value="item.value"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="上架场景" prop="sceneId" class="single-line-label">
                  <el-select v-model="form.sceneId" clearable placeholder="请选择上架场景" filterable multiple>
                    <el-option v-for="(item, i) in extData.sceneMapList || []" :key="i" :label="item.key"
                      :value="item.value"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="不允许应用" prop="outCodeArray" class="single-line-label">
                  <el-select v-model="form.outCodeArray" clearable placeholder="请选择应用名称" filterable multiple>
                    <el-option v-for="(item, i) in extData.appCodeList || []" :key="i" :label="item.key"
                               :value="item.value"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="允许推送渠道" prop="inChannelArray" class="single-line-label">
                  <el-select v-model="form.inChannelArray" clearable placeholder="请选择渠道名称" filterable multiple>
                    <el-option v-for="(item, i) in extData.channelNameList || []" :key="i" :label="item.key"
                      :value="item.value"></el-option>
                  </el-select>
                  <br>
                  <span style="color: red">注意：选择指定的推送渠道（可多选），没有限制则不选择</span>
                </el-form-item> <el-form-item label="不允许渠道" prop="outChannelArray" class="single-line-label">
                  <el-select v-model="form.outChannelArray" clearable placeholder="请选择渠道名称" filterable multiple>
                    <el-option v-for="(item, i) in extData.channelNameList || []" :key="i" :label="item.key"
                      :value="item.value"></el-option>
                  </el-select>
                  <br>
                  <span style="color: red">注意：选择不允许推送渠道（可多选），没有限制则不选择</span>
                </el-form-item>
                <el-form-item label="年龄" prop="formTimes">
                  <div :class="{ flex: !isMobile }">
                    <el-input-number :min="0" v-model="form.minAge" placeholder="请输入最小年龄" />
                    <div style="margin: 0 8px">至</div>
                    <el-input-number :min="0" v-model="form.maxAge" placeholder="请输入最大年龄" />
                  </div>
                </el-form-item>
                <el-form-item label="不推送" prop="notPushDayWeek">
                  <el-checkbox-group v-model="form.notPushDayWeek">
                    <el-checkbox label="1">周一</el-checkbox>
                    <el-checkbox label="2">周二</el-checkbox>
                    <el-checkbox label="3">周三</el-checkbox>
                    <el-checkbox label="4">周四</el-checkbox>
                    <el-checkbox label="5">周五</el-checkbox>
                    <el-checkbox label="6">周六</el-checkbox>
                    <el-checkbox label="7">周日</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
                <el-form-item v-for="item in dynamicParamList" :key="item.filedName" :label="item.name"
                  :prop="item.filedName">
                  <el-select style="width: 100%" v-model="form[item.filedName]" multiple
                    :placeholder="`请选择${item.name}`">
                    <el-option v-for="itemOp in item.children" :key="itemOp.value" :label="itemOp.name"
                      :value="itemOp.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="开始日期" prop="startdate">
                  <el-date-picker type="date" v-model="form.startdate" placeholder="选择开始日期" value-format="yyyy-MM-dd">
                  </el-date-picker>
                </el-form-item>

                <el-form-item label="结束日期" prop="enddate">
                  <el-date-picker type="date" v-model="form.enddate" placeholder="选择结束日期" value-format="yyyy-MM-dd">
                  </el-date-picker>
                </el-form-item>

                <el-form-item label="开始时间" prop="starttime">
                  <el-time-picker v-model="form.starttime" placeholder="选择开始时间" value-format="HH:mm:ss">
                  </el-time-picker>
                </el-form-item>

                <el-form-item label="结束时间" prop="endtime">
                  <el-time-picker v-model="form.endtime" placeholder="选择结束时间" value-format="HH:mm:ss">
                  </el-time-picker>
                </el-form-item>
                <el-form-item label="uv 总量" prop="uvCount">
                  <el-input v-model.number="form.uvCount" placeholder="请输入uv总量" type="number" />
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="12">
              <el-row>
                <el-col :span="12">
                  <el-form ref="form1" :model="form" :rules="rules" label-width="100px">
                    <el-form-item label="推送的省市" prop="cityInfo">
                      <el-tree :data="addressInfoList" show-checkbox auto-expand-parent node-key="cityCode"
                        ref="cityInfoTree" :props="{
                          children: 'children',
                          label: 'city',
                        }">
                      </el-tree>
                    </el-form-item>
                  </el-form>
                </el-col>
                <el-col :span="12">
                  <el-form ref="form2" :model="form" :rules="rules" label-width="100px">
                    <el-form-item label="不推送的省市" prop="outCityArray">
                      <el-tree :data="addressInfoList" show-checkbox auto-expand-parent node-key="cityCode"
                        ref="outCityArrayTree" :props="{
                          children: 'children',
                          label: 'city',
                        }">
                      </el-tree>
                    </el-form-item>
                  </el-form>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <div class="demo-drawer-form__footer">
            <el-button type="primary" @click="submit">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {
  listOnlieInfo,
  getOnlieInfo,
  delOnlieInfo,
  addOnlieInfo,
  baseInfoExtData,
  updateStatus,
  updateOnlieInfo,
  updateJumpStatus,
  listPirceSort
} from "@/api/product/onlieInfo";
import { listAddressInfo } from "@/api/addressInfo/addressInfo";
import { listTaskDictInfo } from "@/api/dict/dictInfo";
import TanChuang from './components/TanChuang.vue'
const notPushDayWeekMap = {
  周一: "1",
  周二: "2",
  周三: "3",
  周四: "4",
  周五: "5",
  周六: "6",
  周日: "7",
};
export default {
  name: "OnlieInfo",
  components: {
    TanChuang
  },
  data() {
    return {
      priceSortSwitch: false,
      // 遮罩层
      loading: true,
      id: '',
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      dynamicParamList: [], // 动态参数信息
      extData: {
        channelNameList: [],
        appCodeList:[]
      },
      // 产品上线信息表格数据
      OnlieInfoList: [],
      addressInfoList: [], //地址树结构信息
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        productName: null,
        priceAmount: null,
        sortWeight: null,
        outChannelArray: null,
        inChannelArray: null,
        channelType: null,
        sceneId: null,
        outCodeArray: null,
        starttime: null,
        endtime: null,
        startdate: null,
        enddate: null,
        uvCount: null,
        status: null,
        jumpStatus: null,
      },
      // 表单参数
      form: {
        inChannelArray: [],  // 必须是数组
        outChannelArray: [], // 必须是数组
        notPushDayWeek: [],
        outCodeArray:[]
      },

      // 表单校验
      rules: {
        priceAmount: [
          { required: true, message: "产品单价不能为空", trigger: "blur" }
        ],
        sortWeight: [
          { required: true, message: "排序权重不能为空", trigger: "blur" }
        ],
        channelType: [
          { required: true, message: "渠道类型不能为空", trigger: "change" }
        ],
        sceneId: [
          { required: true, message: "场景IDs不能为空", trigger: "blur" }
        ],
        starttime: [
          { required: true, message: "开始时间不能为空", trigger: "blur" }
        ],
        endtime: [
          { required: true, message: "结束时间不能为空", trigger: "blur" }
        ],
        startdate: [
          { required: true, message: "开始日期不能为空", trigger: "blur" }
        ],
        enddate: [
          { required: true, message: "结束日期不能为空", trigger: "blur" }
        ],
        uvCount: [
          { required: true, message: "uv 总量不能为空", trigger: "blur" }
        ],
        status: [
          { required: true, message: "状态不能为空", trigger: "change" }
        ],
        jumpStatus: [
          { required: true, message: "跳转状态不能为空", trigger: "change" }
        ],
        delFlag: [
          { required: true, message: "$comment不能为空", trigger: "blur" }
        ],
        createTime: [
          { required: true, message: "$comment不能为空", trigger: "blur" }
        ],
      }
    };
  },
  watch: {
    priceSortSwitch(newValue){
      console.log(123)
      if(newValue){
        localStorage.setItem('priceSortSwitch', 1)
      }else{
        localStorage.setItem('priceSortSwitch', '')
      }
    }
  },
  created() {
    this.priceSortSwitch = !!localStorage.getItem('priceSortSwitch') || false
    this.reset();
    this.getTreeselect();
    this.getListAddressInfo();
    this.getList();
    this.getOptions();
  },
  methods: {
    /** 查询地址列表列表 */
    getListAddressInfo() {
      listAddressInfo().then((response) => {
        this.addressInfoList = this.handleTree(response.rows, "cityCode");
      });
    },
    priceSortSwitchChange(){
      this.resetQuery()
    },
    getListPirceSort() {
      this.loading = true;
      listPirceSort(this.queryParams).then((response) => {
        this.OnlieInfoList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 查询产品上线信息列表 */
    getList() {
      this.loading = true;
      if(this.priceSortSwitch){
        listPirceSort(this.queryParams).then((response) => {
          this.OnlieInfoList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
        return
      }
      listOnlieInfo(this.queryParams).then(response => {
        this.OnlieInfoList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    rowClassName(scope) {
      return scope.row.status == 1 ? 'green-row' : '';
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    getOptions() {
      baseInfoExtData().then((response) => {
        this.extData = response.data;
      });
    },
    // 表单重置
    reset() {
      this.form = {
        productId: null,
        productName: null,
        priceAmount: null,
        sortWeight: null,
        outChannelArray: null,
        inChannelArray: null,
        channelType: null,
        sceneId: null,
        starttime: null,
        endtime: null,
        startdate: null,
        enddate: null,
        uvCount: null,
        status: null,
        jumpStatus: null,
        delFlag: null,
        createTime: null,
        updateTime: null,
        notPushDayWeek: []
      };
      if (this.$refs.cityInfoTree) {
        this.$refs.cityInfoTree.setCheckedKeys([]);
        this.$refs.outCityArrayTree.setCheckedKeys([]);
      }
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // 状态修改
    handleStatusChange(row, value) {
      let text = (+value) === 0 ? "停用" : "启用";
      updateStatus({ productId: row.productId, status: +value }).then(res => {
        this.$modal.msgSuccess(text + "成功");
        this.handleQuery();
      }).catch(() => {
        row.status = row.status == 0 ? 1 : 0;
      })
    },
    StatusChange(row, value) {
      let text = (+value) === 0 ? "停用" : "启用";
      updateJumpStatus({ productId: row.productId, jumpStatus: +value }).then(res => {
        this.$modal.msgSuccess(text + "成功");
        this.handleQuery();
      }).catch(() => {
        row.jumpStatus = row.jumpStatus == 0 ? 1 : 0;
      })
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.productId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.id = ''
      this.open = true;
      this.title = "添加产品上线信息";
    },
    handleUpdate(row) {
      this.reset();
      this.id = row.productId || this.ids
      const productId = row.productId || this.ids;

      getOnlieInfo(productId).then(response => {
        this.form = response.data;

        // 确保正确处理 channelType 和 sceneId
        this.form.channelType = this.convertToJSON(response.data.channelType);
        this.form.sceneId = this.convertToJSON(response.data.sceneId);

        // 处理 inChannelArray 和 outChannelArray
        this.form.inChannelArray = response.data.inChannelArray ? JSON.parse(response.data.inChannelArray) : [];
        this.form.outChannelArray = response.data.outChannelArray ? JSON.parse(response.data.outChannelArray) : [];
        this.form.outCodelArray = response.data.outCodelArray ? JSON.parse(response.data.outCodelArray) : [];
        this.form.outCodeArray = response.data.outCodeArray ? JSON.parse(response.data.outCodeArray) : [];
        this.dynamicParamList.forEach((item) => {
          this.form[item.filedName] = response.data[item.filedName] ? JSON.parse(response.data[item.filedName]) : [];
          console.log(item.filedName)
        })
        this.form.notPushDayWeek = response.data.notPushDayWeek ? JSON.parse(response.data.notPushDayWeek) : [];
        this.$nextTick(() => {
          if (this.$refs.cityInfoTree) {
            this.$refs.cityInfoTree.setCheckedKeys(response.data.cityInfo ? JSON.parse(response.data.cityInfo) : []);
            this.$refs.outCityArrayTree.setCheckedKeys(response.data.outCityArray ? JSON.parse(response.data.outCityArray) : []);
          }
        })
        this.open = true;
        this.title = "修改产品上线信息";
      });
    },
    convertToJSON(value) {
      if (!value) return [];  // 如果值为 null 或 undefined，返回空数组
      if (typeof value === 'string') {
        const valuesArray = value.split(',').map(item => item.trim());
        return valuesArray.length === 1 ? [valuesArray[0]] : valuesArray; // 确保返回数组
      }
      return Array.isArray(value) ? value : [value]; // 如果值是单个单位，转换为数组
    },
    /** 查询菜单下拉树结构 */
    getTreeselect() {
      listTaskDictInfo().then((response) => {
        this.dynamicParamList = this.handleTree(response.rows, "id");
        this.convertFieldNamesToCamelCase();
      });
    },

    convertFieldNamesToCamelCase() {
      this.dynamicParamList.forEach((item) => {
        item.filedName = this.snakeCaseToCamelCase(item.filedName);
      });
    },
    snakeCaseToCamelCase(snakeCase) {
      return snakeCase.replace(/_([a-z])/g, (match, letter) => letter.toUpperCase());
    },
    submit() {
      if (this.id) {
        this.submitForm()
        return
      }
      this.submitFormAdd()
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          console.log(this.form.notPushDayWeek)
          const formData = {
            ...this.form,
            inChannelArray: JSON.stringify(this.form.inChannelArray),
            outChannelArray: JSON.stringify(this.form.outChannelArray),
            sceneId: Array.isArray(this.form.sceneId) ? this.form.sceneId.join(',') : this.form.sceneId,
            channelType: Array.isArray(this.form.channelType) ? this.form.channelType.join(',') : this.form.channelType,
            notPushDayWeek: JSON.stringify(this.form.notPushDayWeek),
            outCodelArray: JSON.stringify(this.form.outCodelArray),
            outCodeArray: JSON.stringify(this.form.outCodeArray),
          };
          formData.cityInfo = this.$refs.cityInfoTree.getCheckedKeys();
          formData.outCityArray = this.$refs.outCityArrayTree.getCheckedKeys();
          for (const key in formData) {
            const item = formData[key];
            if (Array.isArray(item)) {
              formData[key] = JSON.stringify(item)
            }
          }
          updateOnlieInfo(formData).then(response => {
            this.$modal.msgSuccess("修改成功");
            this.open = false;
            this.getList();
          });
        }
      });
    },   /** 提交按钮 */
    submitFormAdd() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          const formData = {
            ...this.form,
            productId: this.form.productName,
            inChannelArray: JSON.stringify(this.form.inChannelArray),
            outChannelArray: JSON.stringify(this.form.outChannelArray),
            outCodelArray: JSON.stringify(this.form.outCodelArray),
            outCodeArray: JSON.stringify(this.form.outCodeArray),
            sceneId: Array.isArray(this.form.sceneId) ? this.form.sceneId.join(',') : this.form.sceneId,
            channelType: Array.isArray(this.form.channelType) ? this.form.channelType.join(',') : this.form.channelType,
            notPushDayWeek: JSON.stringify(this.form.notPushDayWeek)
          };
          formData.cityInfo = this.$refs.cityInfoTree.getCheckedKeys();
          formData.outCityArray = this.$refs.outCityArrayTree.getCheckedKeys();
          for (const key in formData) {
            const item = formData[key];
            if (Array.isArray(item)) {
              formData[key] = JSON.stringify(item)
            }
          }
          addOnlieInfo(formData).then(response => {
            this.$modal.msgSuccess("新增成功");
            this.open = false;
            this.getList();
          });
        }
      });
    }
    ,
    /** 删除按钮操作 */
    handleDelete(row) {
      const productIds = row.productId || this.ids;
      this.$modal.confirm('是否确认删除产品上线信息编号为"' + productIds + '"的数据项？').then(function () {
        return delOnlieInfo(productIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('product/OnlieInfo/export', {
        ...this.queryParams
      }, `OnlieInfo_${new Date().getTime()}.xlsx`)
    }
  }
};

</script>

<style>
.green-row {
  background-color: rgb(78, 197, 244) !important;
  /* 确保背景颜色优先级 */
  color: rgb(15, 1, 1);
  /* 确保文本颜色对比明显 */
}
</style>
